<!-- 独立的栏目:用户管理 -->
<template>
  <div class="table">
    <!-- 批量删除 -->
    <el-button @click="delAll">批量删除</el-button>
    <NewElTable :tableData="tableData.list" :showSelection="true" :tableHeader="tableHeader.list" @sendIds="getIds">
      <template v-slot:status>
        <el-table-column label="是否可用" slot="status" prop="status" width="180">
          <template #default="scope">
            <el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" active-color="#13ce66"
              @change="changeStatus($event, scope.row)" inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
      </template>
      <template v-slot:action>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </template>


    </NewElTable>


  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
// 导入一个组件使用  肢解页面  组件:复用性
import NewElTable from "@/components/NewElTable/index.vue"
const tableHeader = reactive({
  list: [
    {
      key: "id",
      title: "编号",
      minWidth: 60,
    },
    {
      key: "time",
      minWidth: 100,
      title: "开启时间(整点)",
    },
    {
      key: "continued",
      minWidth: 100,
      title: "持续时间(整数小时)",
    },
    {
      key: "slide",
      minWidth: 60,
      type: "img",
      title: "幻灯片",
    },
    {
      slot: "status",
      title: "是否可用",
      minWidth: 80,
    },
    {
      key: "sort",
      title: "排序",
      minWidth: 80,
    },
    {
      slot: "action",
      fixed: "right",
      title: "操作",
      minWidth: 120,
    },
  ]
});
const deleteIds = ref([]);
const tableData = reactive({
  list: [
    {
      id: 1104,
      gid: 49,
      add_time: 1730784241,
      sort: 1,
      status: 1,
      time: "11",
      continued: "1",
      slide: [
        "http://62.234.30.177/uploads/attach/2024/11/20241104/735a0d42c82c28069dcb145055de64ab.jpeg",
      ],
    },
    {
      id: 1103,
      gid: 49,
      add_time: 1730784198,
      sort: 1,
      status: 0,
      time: "12",
      continued: "2",
      slide: [
        "http://62.234.30.177/uploads/attach/2024/11/20241102/4c8bb75e8ebc6872706d1119404cefa8.jpg",
      ],
    },
  ],
});


const changeStatus = ($event, row) => {
  console.log("change状态", $event, row);

  // 调用接口
};

const getIds = (ids) => {
  console.log("批量删除父组件", ids)
  deleteIds.value = ids
}
// 批量删除
const delAll = () => {
  // 调用接口.删除id 3,18的
  // 拿到ids

  console.log("调用接口传递参数是", deleteIds.value);
};
const handleEdit = (row) => {
  console.log(row);
};
const handleDelete = (row) => {
  console.log(row);
};

</script>
<style scoped>
.table {
  width: 100%;
}
</style>